<script>
import { debounce } from 'lodash';
import { typeOf } from '@/utils/sort';
import { _EDIT, _VIEW } from '@/config/query-params';
import { removeAt } from '@/utils/array';
import { asciiLike } from '@/utils/string';
import { base64Encode, base64Decode } from '@/utils/crypto';
import { downloadFile } from '@/utils/download';
import TextAreaAutoGrow from '@/components/form/TextAreaAutoGrow';
import SortableTable from '@/components/SortableTable';

/*
  @TODO
  - Paste
  - Read from file
  - Multiline
  - Concealed value
*/

export default {
  components: { SortableTable, TextAreaAutoGrow },

  props: {
    value: {
      type:     [Array, Object],
      default: null,
    },
    mode: {
      type:    String,
      default: _EDIT,
    },
    asMap: {
      type:    Boolean,
      default: true,
    },
    initialEmptyRow: {
      type:    Boolean,
      default: false,
    },

    title: {
      type:    String,
      default: ''
    },
    protip: {
      type: [String, Boolean],
      default() {
        // return this.$store.getters['i18n/t']('formKeyValue.protip');
        return '';
      }
    },

    padLeft: {
      type:    Boolean,
      default: false,
    },

    // For asMap=false, the name of the field that goes into the row objects
    keyName: {
      type:    String,
      default: 'key',
    },
    keyLabel: {
      type:    String,
      default: '',
    },
    keyPlaceholder: {
      type:    String,
      default: 'e.g. foo'
    },

    separatorLabel: {
      type:    String,
      default: '',
    },

    // For asMap=false, the name of the field that goes into the row objects
    valueName: {
      type:    String,
      default: 'value',
    },
    valueLabel: {
      type:    String,
      default: 'Value',
    },
    valuePlaceholder: {
      type:    String,
      default: 'e.g. bar'
    },
    valueCanBeEmpty: {
      type:    Boolean,
      default: false,
    },
    downloadLabel: {
      type:    String,
      default: 'Download'
    },
    valueBinary: {
      type:    Boolean,
      default: false,
    },
    valueMultiline: {
      type:    Boolean,
      default: true,
    },
    valueBase64: {
      type:    Boolean,
      default: false,
    },
    valueConcealed: {
      type:    Boolean,
      default: false,
    },

    addLabel: {
      type:    String,
      default: '添加',
    },
    addIcon: {
      type:    String,
      default: 'icon-plus',
    },
    addAllowed: {
      type:    Boolean,
      default: true,
    },

    readLabel: {
      type:    String,
      default: 'Read from file'
    },
    readIcon: {
      type:    String,
      default: 'icon-upload',
    },
    readAllowed: {
      type:    Boolean,
      default: true,
    },
    readAccept: {
      type:    String,
      default: '*',
    },
    readMultiple: {
      type:    Boolean,
      default: false,
    },

    removeLabel: {
      type:    String,
      default: '删除',
    },
    removeIcon: {
      type:    String,
      default: 'icon-minus',
    },
    removeAllowed: {
      type:    Boolean,
      default: true,
    },

    parserSeparators: {
      type:    Array,
      default: () => [': ', '='],
    },
  },

  data() {
    // @TODO base64 and binary support for as Array (!asMap)
    if ( !this.asMap ) {
      return { rows: (this.value || []).slice() };
    }

    const input = this.value || {};
    const rows = [];

    Object.keys(input).forEach((key) => {
      let value = input[key];

      if ( this.valueBase64 ) {
        value = base64Decode(value);
      }

      const binary = typeof value === 'string' && !asciiLike(value);

      rows.push({
        key,
        value,
        binary
      });
    });

    if ( !rows.length && this.initialEmptyRow && this.mode !== _VIEW) {
      rows.push({ [this.keyName]: '', [this.valueName]: '' });
    }

    return { rows };
  },
  computed: {
    isView() {
      return this.mode === _VIEW;
    },

    showAdd() {
      return !this.isView && this.addAllowed;
    },

    showRead() {
      return !this.isView && this.readAllowed;
    },

    showRemove() {
      return !this.isView && this.removeAllowed;
    },

    headers() {
      const out = [
        {
          name:  'key',
          label: this.t('tableHeaders.key'),
          value: this.keyName,
        },
        {
          name:  'value',
          label: this.t('tableHeaders.value'),
          value: this.valueName
        }
      ];

      if ( this.showRemove ) {
        out.push({
          name:  'remove',
          label: '',
          value: '',
          align: 'right',
          width: 100
        });
      }

      if ( this.valueBinary && this.isView ) {
        out.push({
          name:  'download',
          label: 'Download',
          value: '',
          align: 'right'
        });
      }

      return out;
    }
  },

  created() {
    this.queueUpdate = debounce(this.update, 500);
  },

  methods: {
    add(key = '', value = '', binary = false) {
      this.rows.push({
        [this.keyName]:   key,
        [this.valueName]: value,
        binary,
      });
      this.queueUpdate();
      this.$nextTick(() => {
        // this.$refs.key.focus();
      });
    },

    remove(row) {
      const idx = this.rows.indexOf(row);

      removeAt(this.rows, idx);
      this.queueUpdate();
    },
    removeEmptyRows() {
      const cleaned = this.rows.filter((row) => {
        return (row.value.length || row.key.length);
      });

      this.$set(this, 'rows', cleaned);
    },
    readFromFile() {
      this.$refs.uploader.click();
    },

    fileChange(event) {
      const input = event.target;
      const handles = input.files;
      const names = [];

      this.removeEmptyRows();
      if ( handles ) {
        for ( let i = 0 ; i < handles.length ; i++ ) {
          const reader = new FileReader();

          reader.onload = (loaded) => {
            const value = loaded.target.result;

            this.add(names[i], value, !asciiLike(value));
          };

          reader.onerror = (err) => {
            this.$dispatch('growl/fromError', { title: 'Error reading file', err }, { root: true });
          };

          names[i] = handles[i].name;
          reader.readAsText(handles[i]);
        }

        input.value = '';
      }
    },

    download(row) {
      const name = row[this.keyName];
      const value = row[this.valueName];

      downloadFile(name, value, 'application/octet-stream');
    },

    update() {
      if ( this.isView ) {
        return;
      }

      if ( !this.asMap ) {
        this.$emit('input', this.rows.slice());

        return;
      }
      const out = {};
      const keyName = this.keyName;
      const valueName = this.valueName;

      for ( const row of this.rows ) {
        let value = (row[valueName] || '');
        const key = (row[keyName] || '').trim();

        if (typeOf(value) === 'object') {
          out[key] = JSON.parse(JSON.stringify(value));
        } else {
          value = value.trim();

          if ( value && this.valueBase64 ) {
            value = base64Encode(value);
          }

          if ( key && (value || this.valueCanBeEmpty) ) {
            out[key] = value;
          }
        }
      }
      this.$emit('input', out);
    }
  },
};
</script>

<template>
  <div class="key-value" :class="mode">
    <div v-if="title" class="clearfix">
      <h2 class="mb-10" :style="{'display':'flex'}">
        {{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" />
      </h2>
    </div>

    <SortableTable
      :headers="headers"
      :rows="rows"
      :search="false"
      :table-actions="false"
      :row-actions="false"
      :show-no-rows="isView"
      :events-table="isView"
      key-field="id"
    >
      <template #col:key="{row}">
        <td class="key">
          <slot
            name="key"
            :row="row"
            :mode="mode"
            :keyName="keyName"
            :valueName="valueName"
            :isView="isView"
          >
            <div v-if="isView" class="view">
              {{ row[keyName] }}
            </div>
            <input
              v-else
              ref="key"
              v-model="row[keyName]"
              :placeholder="keyPlaceholder"
              @input="queueUpdate"
            />
          </slot>
        </td>
      </template>
      <template #col:value="{row}">
        <td class="value">
          <slot
            name="value"
            :row="row"
            :mode="mode"
            :keyName="keyName"
            :valueName="valueName"
            :isView="isView"
            :queueUpdate="queueUpdate"
          >
            <span v-if="valueBinary || row.binary">
              {{ row[valueName].length }} byte<span v-if="row[valueName].length !== 1">s</span>
            </span>
            <div v-else-if="isView" class="view" :class="{'conceal': valueConcealed}">
              {{ row[valueName] }}
            </div>
            <TextAreaAutoGrow
              v-else-if="valueMultiline"
              v-model="row[valueName]"
              :placeholder="valuePlaceholder"
              :min-height="50"
              :spellcheck="false"
              @input="queueUpdate"
            />
            <input
              v-else
              v-model="row[valueName]"
              :placeholder="valuePlaceholder"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              @input="queueUpdate"
            />
          </slot>
        </td>
      </template>
      <template v-if="valueBinary" #col:download="{row}">
        <td class="download" :data-title="valueLabel">
          <a href="#" @click="download(row)">Download</a>
        </td>
      </template>
      <template #col:remove="{row}">
        <td class="remove">
          <slot name="removeButton" :remove="remove" :row="row">
            <button type="button" class="btn bg-transparent role-link" @click="remove(row)">
              {{ removeLabel }}
            </button>
          </slot>
        </td>
      </template>
    </SortableTable>

    <div v-if="showAdd || showRead" class="footer">
      <slot v-if="showAdd" name="add">
        <button type="button" class="btn role-tertiary add" @click="add()">
          {{ addLabel }}
        </button>
        <slot name="moreAdd" :rows="rows" />
      </slot>
      <button v-if="showRead" type="button" class="btn role-tertiary read-from-file" @click="readFromFile">
        {{ readLabel }}
      </button>
    </div>

    <input
      ref="uploader"
      type="file"
      :accept="readAccept"
      :multiple="readMultiple"
      class="hide"
      @change="fileChange"
    />
  </div>
</template>

<style lang="scss">
.key-value {
  $separator: 20;
  $remove: 75;
  $spacing: 10px;

  .title {
    margin-bottom: 10px;

    .read-from-file {
      float: right;
    }
  }

  &.edit, &.create, &.clone {
    TABLE.sortable-table THEAD TR TH {
      border-color: transparent;
    }
  }

  TABLE.sortable-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: $spacing;

    TH, TD {
      padding: $spacing $spacing $spacing 0;
    }

    > THEAD > TR > TH:first-child {
      padding-left: 10px;
    }
    > TBODY > TR:not(.group-row) > TD {
      &:nth-child(2) {
        padding-left: 10px;
      }
    }
  }

  .left {
    width: #{$remove}px;
  }

  input {
    height: 50px;
  }

  .key {
    vertical-align: middle;

    .view {
      width: 100%;
      height: 100%;
      display: inline;
      max-height: 70px;
      overflow-y: auto;
    }

    label {
      margin: 0;
    }
  }

  .value {
    vertical-align: middle;

    .view {
      width: 100%;
      overflow-y: auto;
      &textarea {
        max-height: 70px;
      }
    }

    label {
      margin: 0;
    }

    select {
      -webkit-appearance: none;
      border-radius: 2px;
    }

    textarea::placeholder {
      padding-top: 0px;
      color: var(--input-placeholder);
    }
  }

  .remove {
    vertical-align: middle;
    text-align: right;
    width: #{$remove}px;
  }

  .footer {
    .add {
      margin-left: 1px;
    }

    .protip {
      float: right;
      padding: 5px 0;
    }
  }

  .download {
    text-align: right;
  }

  .empty {
    text-align: center;
  }

  .create {
  }

  .view {
    TABLE.sortable-table {
        TD, TH {
          padding: $spacing 0;
        }
      }
    }
}

.key-value TR:first-of-type TD.no-rows {
  padding: 40px;
  text-align: center;
}
</style>
